<div class="root" >
  {#if scale}
  <div
    class="reticle {round ? 'round' : ''}"
    style="box-sizing:content-box;
      border-color: {color};
      top:{top}%;
      left:{left}%; 
      width:{right-left}%; 
      height:{bottom-top}%;
      "
  >
    {#if annotationValue}
      <div class="annotationTabParent" style="top:50%;">
        <div class="annotationTab" style="background:{color};">
          <div class="annotation"
            >{annotationValue} 
          </div>
        </div>
      </div>
    {/if}
  </div>
  {/if}
</div>

<script>
  export default {
    data() {
      return {
        width: 0,
        height: 0,
        dragging: false,
        startPos: {x: -100, y: -100},
        background: true,
        round: false,
        color: "#ff6600",
        enableDragging: true,
      }
    },
    computed: {
      h: ({scale}) => 1 / scale,
      w: ({scale, aspectRatio}) => 1 / scale * aspectRatio,
      l: ({gcx, w}) => (gcx - w / 2),
      t: ({gcy, h, aspectRatio}) => (gcy - h / 2),
      r: ({l, w}) => l + w, 
      b: ({t, h}) => t + h,
      left: ({l}) => l * 100,
      right: ({r}) => r * 100,
      top: ({t}) => t * 100,
      bottom: ({b}) => b * 100,
    }
  }
</script>

<style>
  svg {
    position: absolute;
    top: 0;
    left: 0;
  }
  svg path {
    fill: white;
    fill-opacity: 0.5;
  }
  svg path.transparent {
    fill-opacity: 0;
  }
  .root {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
  }
  .reticle {
    top: 0;
    left: 0;
    position: absolute;
    border: solid 3px black;
    border-radius: 3px;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0);
  }
  .reticle.round {
    border-radius: 50%;
  }
  .annotationTabParent {
    position: absolute;
    left:0px;
  }
  .annotationTab {
    width: 16px;
    height: 16px;
    left: -16px;
    top: -8px;
    position: absolute;
    border-radius: 3px 0px 0px 3px;
    display: grid;
    align-items: center;
  }
  .annotation {
    line-height: 100%;
    font-size: 12px;
    left: 4px;
    color: white;
    position: absolute;
    text-align: center;
  }
</style>